<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            font-size: 0;
        }

        .box {
            width: 600px;
            height: 900px;
            background-color: red;
            margin: 0 auto;
            /*  居中 */
        }

        .item {
            width: 600px;
            height: 300px;
            background-color: seagreen;
        }

        .item_left {
            width: 100px;
            height: 300px;
            background-color: skyblue;
            display: inline-block;
        }

        .item_right {
            width: 500px;
            height: 300px;
            background-color: violet;
            display: inline-block;
        }

        .item_right_title {
            width: 100%;
            height: 80px;
            background-color: yellow;
            margin-top: 5px;
            /*设置margin的上边距*/
        }

        .item_right_intrdouce {
            width: 100%;
            height: 80px;
            background-color: tan;
            margin-top: 20px;
        }

        .item_right_type {
            width: 100%;
            height: 80px;
            background-color: blueviolet;
            margin-top: 10px;
        }

        .style {
            width: 600;
            height: 300px;
            background-color: chartreuse;
        }

        .style_left {
            width: 100px;
            height: 300px;
            background-color: chocolate;
            display: inline-block;
        }

        .style_right {
            width: 500px;
            height: 300px;
            background-color: darkorange;
            display: inline-block;
        }

        .style_right_title {
            width: 100%;
            height: 80px;
            background-color: darkred;
            margin-top: 5px;
        }

        .style_right_intrdouce {
            width: 100%;
            height: 80px;
            background-color: deeppink;
            margin-top: 20px;
        }

        .style_right_type {
            width: 100%;
            height: 80px;
            background-color: dimgray;
            margin-top: 10px;
        }

        .Tstyle {
            width: 600;
            height: 300px;
            background-color: fuchsia;
        }

        .Tstyle_left {
            width: 100px;
            height: 300px;
            background-color: honeydew;
            display: inline-block;
        }

        .Tstyle_right {
            width: 500px;
            height: 300px;
            background-color: darkorange;
            display: inline-block;
        }

        .Tstyle_right_title {
            width: 100%;
            height: 80px;
            background-color: darkred;
            margin-top: 5px;
        }

        .Tstyle_right_intrdouce {
            width: 100%;
            height: 80px;
            background-color: deeppink;
            margin-top: 20px;
        }

        .Tstyle_right_type {
            width: 100%;
            height: 80px;
            background-color: dimgray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!--每一个横框-->
        <div class="item">
            <!--左右边框-->
            <div class="item_left"></div>
            <!--放图片-->
            <div class="item_right">
                <!--文字-->
                <div class="item_right_title"></div>
                <div class="item_right_intrdouce"></div>
                <div class="item_right_type"></div>
            </div>
        </div>
        <div class="style">
            <div class="style_left"></div>
            <!--放图片-->
            <div class="style_right">
                <!--文字-->
                <div class="style_right_title"></div>
                <div class="style_right_intrdouce"></div>
                <div class="style_right_type"></div>
            </div>
            <div class="Tstyle">
                <div class="Tstyle_left"></div>
                <!--放图片-->
                <div class="Tstyle_right">
                    <!--文字-->
                    <div class="Tstyle_right_title"></div>
                    <div class="Tstyle_right_intrdouce"></div>
                    <div class="Tstyle_right_type"></div>
                </div>
            </div>
</body>

</html>